<!-- 
    主页顶部操作区域
 -->
<template>
    <div class="row">
        <i class="iconfont icon-xuanxiang" @click="menuBasic = true"></i>
        <i class="iconfont icon-line-quillpenyumaobi" @click="tapBasic = true"></i>
        <nut-popup position="left" :style="menuBasicStyle" v-model:visible="menuBasic">正文</nut-popup>
        <nut-popup position="bottom" :style="tapBasicStyle" v-model:visible="tapBasic">
            <div class="option" @click="jumpSend(1)">
                <i class="iconfont icon-qianbi"></i>
                <div>informal-essay</div>
            </div>
            <div class="option">
                <i class="iconfont icon-pinpaigushi"></i>
                <div>anonymous-story</div>
            </div>
        </nut-popup>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from "vue-router"
const router = useRouter()
const menuBasicStyle = {
    padding: '30px 50px',
    height: '100vh'
}
const tapBasicStyle = {
    padding: '30px 50px'
}
const tapBasic = ref(true);
const menuBasic = ref(false);
const jumpSend = (e: number) => {
    router.push(e == 1 ? "/publishInformal" : "")
}
</script>

<style lang="scss" scoped>
:deep(.nut-popup) {
    display: flex;
    justify-content: space-evenly;
    padding: 30px 20px !important;

    .option {
        text-align: center;
        padding: 15px;
        box-shadow: 10px 10px 10px 10px;
        border-radius: 5px;

        div {
            margin-top: 20px;
        }
    }
}


.row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: $light-font-color;
    height: 50px;

    i {
        font-size: 36px;
    }
}
</style>
